<template>
  <div>
    <ep-advance-card title="基本测试" class="m-b-20 m-l-20 m-r-20 m-t-20">
      <span class="test-color"> hello, world</span>
      <p>打包命令 npm run build:chunk --APP_ID=xxx</p>
      <p>npm run build:chunk --APP_ID=hello</p>
      <div>
        {{ epenv }}
      </div>
      <ep-row>
        <ep-col :col="12">
          <ep-button type="primary" @click="testApi">测试接口调用</ep-button>
        </ep-col>
        <ep-col :col="12">
          <ep-button type="primary" @click="testUserApi">测试user接口</ep-button>
        </ep-col>
        <ep-col :col="12">
          <ep-button type="primary" @click="testStore">打印 store</ep-button>
        </ep-col>
        <ep-col :col="12">
          <ep-button type="primary" @click="testRouter">打印 router</ep-button>
        </ep-col>
        <ep-col :col="12">
          props测试：{{ name }}
          <br />
          props测试：{{ age }}
        </ep-col>
        <ep-col :col="12">
          <childCpt />
        </ep-col>
        <ep-col :col="12">
          <ep-input v-model="input"></ep-input>
        </ep-col>
        <ep-col :col="12">
          <div ref="chart" style="height: 200px"></div>
        </ep-col>
      </ep-row>
    </ep-advance-card>
    <ep-advance-card title="tab操作测试" class="m-b-20 m-l-20 m-r-20 m-t-20">
      <test />
    </ep-advance-card>
  </div>
</template>

<script>
import childCpt from '../component/child'
import { helloApi } from 'chunk/api/hello'
import epui from 'ep-ui'
import chartBaseMixin from '@/common/mixins/chartBaseMixin'
import test from './test'

console.log('ep-ui', epui)
console.log('epenv', EPENV)

export default {
  components: {
    childCpt,
    test
  },
  mixins: [chartBaseMixin],

  props: {
    name: String,
    age: String,
    abc: String
  },

  data() {
    return {
      input: '',
      epenv: EPENV
    }
  },

  mounted() {
    this.initChart()
    this.setOption()
  },

  computed: {
    userMainInfo() {
      return this.$store.state.app.userMainInfo
    }
  },

  methods: {
    testApi() {
      helloApi().then(_ => {
        this.$success('接口调用成功')
      })
    },
    testUserApi() {
      this.$store.dispatch('app/getUserInfo').then(res => {
        console.log(res)
      })
    },
    testStore() {
      console.log(this.$store.state)
    },
    testRouter() {
      console.log(this.$router)
    },
    setOption() {
      let option = {
        // title: {
        //   subtext: "Fake Data",
        //   left: "center",
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '100%',
            center: ['70%', '50%'],
            right: '1%',
            data: [
              { value: 1048, name: '完美' },
              { value: 735, name: '良好' },
              { value: 580, name: '一般' },
              { value: 484, name: '很差' },
              { value: 300, name: '无状态' }
            ],
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartObj.setOption(option)
    }
  }
}
</script>

<style></style>
